notebook.community

Edit and run

業務アプリケーションをElectronで作ってみた

合同勉強会 in 大都会岡山 -2015 Winter-

忘年会議2015

おまえ、誰よ

よしだ

お仕事

所属: とある人材紹介会社のマーケティング部門

役割: データ分析チームのデータエンジニア

  • 社内BIツールの開発、設計、運用
    • ScalikeJDBC + Scalaz + Hazelcast、FuelPHP、Angular + TypeScript、etc...
  • 業務改善(BPR)チームの技術担当 <- 今回はこっち

BPR

Business Process Reenginnering

/ びじねすぷろせすりえんじにありんぐ

みんな大好き、Excel

要望

とある業務を将来的に自動化したい

課題

  • データがあちこちに散らばっていている
  • Excel、Accessだったり…
  • 職人によるぬくもりのある手作業によるmerge
  • 本当はもっと多くのデータと結合させたい
  • これまでのデータも活用したい

やっぱり、Webで！

いきなりは難しい…

  • いろいろやろうとするとかなりの規模に
  • 社内BIのAPIを使えるとそのデータも活用できるかも？
  • データの中には、機微情報も含まれる可能性が…
  • とはいえ、諸問題が解決したら将来的には社内BIに取り入れたい

じゃあ、GUIで？

AccessやExcelならVBA？

またまた、ご冗談を(AA略

🙅 VBAで立ち止まっている暇は無い

調査と検証(と称したトライアル)

候補

JavaFX

😆

  • 慣れ親しんだJava
  • ライブラリ豊富
  • IntelliJ IDEAとScene Builder
  • LinuxでビルドしてそのままWindowsで(大抵)使える

JavaFX

😞

  • exe形式にするにはWindowsでビルドする必要あり、しかもかなりサイズがデカい
  • 逆にスタンドアローンだと利用者に社内スタンプラリーを強いる
  • Java8からJDBC-ODBC ブリッジドライバが含まれなくなった
  • JavaFX書いたことあるのは、チームで自分だけ

py2exe

😆

  • IntelliJ IDEAで作れる
  • ライブラリ豊富

😞

  • Windowsでビルドする必要あり
  • Windowsにpythonをインストールするための社内スタンプラリー
  • チーム全員Python入門者

Electron

😆

  • IntelliJ IDEAで(ry
  • 中身はWebアプリ
  • node.jsのライブラリが使える
  • 時代を先取る、ニュー(ry
  • node.jsをインストールしなくてもwindowsで動く
  • JavaScriptならチーム全員使える

Electron

😞

  • gulp初心者
  • Babel初心者
  • そもそもNode.jsで本格的に開発するのは初めて

続きは忘年会議で！

業務アプリケーションをElectronで作ってみた -後半戦-

忘年会議2015

おまえ、誰

よしだ

所属: とある人材紹介会社のマーケティング部門

役割: データ分析チームのデータエンジニア

Electronならワンチャンある？

いきなりは難しいので、個人で始めてみる

希望

  • ElectronだとほぼSPAらしいので、SPA向けのフレームワークを使いたい
  • jQueryの無い世界へ
  • モダンなビルド環境
  • 初めてなのでベースとなるボイラープレートが欲しい

ボイラープレート

React + Babel + Sass + Gulp + Bower な Electron Boilerplate

React.js

( ﾟдﾟ)

挫折

他に無いかなぁ…

Electron + Mithrilで、ふつうのデスクトップアプリを作る

Mithril.js

http://mithril.js.org

Mithrilのドキュメントの日本語訳

Mithril.js

世界最速でMithril本をリリースした話

Mithril――最速クライアントサイドMVC (通称黒ムツ本)

oreilly-japan/mithril-book-sample

覚えることが少ない、しかも早い

速さこそ正義

これだ！

その他のライブラリ

  • Babel.js - トランスパイラ
  • Loki.js - Mongo LikeなAPIを持つストレージエンジン
  • mgcrea/node-xlsx - xlsxファイルの読み書きとJSON化
  • Pure - 軽量CSSフレームワーク
  • font-awesome - Webフォントアイコン

あとで分かったこと

採用しようとしたが断念したライブラリ

windowsでビルドする必要あり 😭

Mithril.jsを知る

まずは、Getting Started

Mithril.jsをもっと知る

Mithril.jsをもっと知る

Dave's guide to Mithril.js Part 1

Mithril.jsをもっと知る

Qiita

Mithril.jsを使ってみた

Component

  • それぞれのComponentを疎にしておくと再利用しやすい(アラートボックス等)
  • 親 -> 子の一方向だと分かりやすい
  • 双方向に通知させようとすると結構大変

Mithril.jsを使ってみた

ラウター

  • 基本は、m.mount
  • ComponentとURLを関連付けるなら、m.route

Mithril.jsを使ってみた

View

  • JSXのようなMSXを使わなくても、m()だけでも結構行ける
  • 自動再描画システム
    • m.redraw()
    • m.startComputation / m.endComputation
  • ヘルパーメソッドの置き場所を考えておく
    • ViewModel
    • Controller

今後

React.js

  • リベンジしたい
  • まずは、Tutorialをやり切る
  • 次は、Browserifyと組み合わせてもう一回やる
  • Reduxと併せて作ってみる

今後

テストコード

  • プロトタイプなのでまだ無い(アカン
  • Electronのテストの書き方を知る

継続的デリバリー

  • ElectronのCIの回し方を知る
  • 社内の閉じた環境でもautoUpdaterが使えるか試してみる
  • versionアップに着いて行く

まとめ

最後に

  • 片手間でフロントエンドをやるのは、正直シンドい
  • JavaFXを選択できた世界線も見てみたい
  • 素朴なVBAで疲弊するより、未来に向けて進化するECMAScript

Content source: grimrose/gbdaitokai2015

Similar notebooks:

notebook.community | gallery | about